/* 
1 页面数据渲染
  1 定义一个函数
  2 发送请求获取数据  渲染页面 
    1 token 几乎都是携带在请求头中   写法几乎定死!！！
    token在请求出去时携带发送
2 点击修改数据
  1 给tbody绑定 双击事件 
  2 判断是不是想要的元素 （成绩）
  3 显示出一个输入框
  4 给输入框绑定事件
    1 失去焦点事件
    2 按下回车事件
  5 事件触发 发送修改的请求 
  6 。。。。。
 */

// token传递给后端
// 后端先验证当前token的合法性， 才回去查询对应的学生信息
// 查询内容的属性需要带token
// 直接调用不需要token
const tbody = document.querySelector("tbody");
async function getScore() {
  const result = await axios({
    url: "/score/list",
    method: "get",
    // 请求头对象中携带token
    // headers为请求头
    // headers: {
    //   // 一般写这个名字，接口文档找不到，向后端确认
    //   Authorization: localStorage.getItem('togen8788'),
    // },

  });
  let html = "";
  for (const key in result.data.data) {
    const { name, score } = result.data.data[key];
    html += `
    <tr>
        <th scope="row">${key}</th>
        <td>${name}</td>
        <td class="score" data-stu_id = "${key}" data-batch = "${1}">${score[0]}</td>
        <td class="score" data-stu_id = "${key}" data-batch = "${2}">${score[1]}</td>
        <td class="score" data-stu_id = "${key}" data-batch = "${3}">${score[2]}</td>
        <td class="score" data-stu_id = "${key}" data-batch = "${4}">${score[3]}</td>
        <td class="score" data-stu_id = "${key}" data-batch = "${5}">${score[4]}</td>
    </tr> 
    `
  }
  tbody.innerHTML = html;
}
getScore();

tbody.addEventListener("dblclick", function (ev) {
  // 判断电机的是不是成绩
  const target = ev.target;
  if (target.classList.contains("score")) {
    // 显示输入框
    const input = document.createElement('input');
    input.type = "text";
    input.value = target.innerHTML;
    target.appendChild(input);

    // // 设置input获得焦点
    input.focus();
    // 失去焦点
    input.onblur = function () {
      ondata();
    }
    // input设置键盘抬起事件
    input.onkeyup = function (ev) {
      if (ev.key === "Enter") {
        ondata();
        // 因为键盘按下同时也会触发失去焦点所以要去除去除 "失去焦点事件";
        input.onblur = null;
      }
    }

    // 封装请求传输
    async function ondata() {
      // 获取参数发送请求完成修改
      const { stu_id, batch } = target.dataset;
      // 获取input的值
      const score = input.value;
      const result = await axios({
        url: "/score/entry",
        method: "post",
        data: {
          stu_id: stu_id,
          batch: batch,
          score: score,
        }
      })
      console.log(result)
      // 判断成功提示弹窗
      if (result.data.code === 0) {
        toastr.success(result.data.message, "成功");
        // 调用渲染
        getScore();
      }
    }
  }
})
// // 获取dom元素
// const tbody = document.querySelector("tbody");

// 获取数据渲染页面
// async function getScore() {
//   const result = await axios({
//     url: "/score/list",
//   });
//   // 生成的html
//   let html = "";
//   for (const key in result.data.data) {
//     // console.log(key);
//     // console.log(result.data.data[key]);
//     const { name, score } = result.data.data[key];
//     html += `<tr>
//     <th scope="row">${key}</th>
//     <td>${name}</td>
//     <td class="score" data-stu_id="${key}" data-batch="${1}">${score[0]}</td>
//     <td class="score" data-stu_id="${key}" data-batch="${2}">${score[1]}</td>
//     <td class="score" data-stu_id="${key}" data-batch="${3}">${score[2]}</td>
//     <td class="score" data-stu_id="${key}" data-batch="${4}">${score[3]}</td>
//     <td class="score" data-stu_id="${key}" data-batch="${5}">${score[4]}</td>
//   </tr>`;
//   }
//   // 把html插入到 tbody中
//   tbody.innerHTML = html;
// }

// getScore();

// // 绑定双击事件
// tbody.addEventListener("dblclick", function (ev) {
//   // console.log("双击"); // 短时间内 快速按两下

//   // 判断是不是想要的元素 （成绩）
//   const target = ev.target; // td
//   if (target.classList.contains("score")) {
//     // 显示出一个 输入框
//     const input = document.createElement("input");
//     input.type = "text";
//     input.value = target.innerText;
//     // 插入对应的位置上
//     target.appendChild(input);
//     // 设置input标签获得焦点
//     input.focus();

//     // 绑定失去焦点事件
//     // input.addEventListener("blur", function () {
//     //   console.log("失去焦点");
//     //   updateScore();
//     // });
//     input.addEventListener("blur", updateScore);
//     // 绑定按下回车事件
//     input.addEventListener("keyup", function (inputEv) {
//       // 判断按下的是回车键
//       if (inputEv.key === "Enter") {
//         // 事件解绑
//         // input.removeEventListener("事件类型","处理函数 有名称的函数 不能是匿名函数")
//         input.removeEventListener("blur", updateScore);

//         updateScore();
//       }
//     });

//     // 执行获取数据 修改数据
//     async function updateScore() {
//       // 获取参数 发送请求，完成修改
//       // 获取参数  id、第几次成绩、分数
//       const { stu_id, batch } = target.dataset;
//       const score = input.value;
//       const result = await axios({
//         url: "/score/entry",
//         method: "post",
//         data: { stu_id, batch, score },
//       });
//       // console.log(result);
//       if (result.data.code === 0) {
//         toastr.success(result.data.message, "成功");
//         // 刷新一下数据
//         getScore();
//       }
//     }
//   }
// });
